🛩️Tutorial-04

Step 1: The First Principle

The most fundamental truth is this: A website is not one single file.

It's a collection of different files (HTML, CSS, JavaScript, images, videos, fonts) organized into folders.

Step 2: The Core Problem

If index.html needs to show an image logo.png, how does the browser know where to find it?

A file path is that address.

A) Relative File Paths

Most common in projects. Path is written starting from the current file location.

my-website/
├── index.html
├── about.html
│
├── images/
│   ├── logo.png
│   └── hero.jpg
│
└── pages/
    ├── contact.html
    └── terms.html
  

Scenario 1: Same Folder

About Us
  

Scenario 2: Sub Folder

Scenario 3: Parent Folder

B) Absolute File Paths

Used for resources on other websites.

Search on Google

  

Summary / Rules of Thumb

• Use relative paths for your own files.
• Use absolute paths for external resources.

Absolute Path Example

Windows

C:\Users\JohnDoe\Documents\report.docx

macOS / Linux

/Users/johndoe/Documents/report.docx

HTML Boilerplate Code

Why Use Boilerplate?

• Prevents quirks mode.
• Fixes encoding issues.
• Improves mobile display.
• Helps SEO and accessibility.

Multipage Website

Websites are usually multi-page with navigation links and consistent header/footer.

The <div> Tag

  
  
Arjun Kumar
  
Loves to code and teach HTML.

  

class and id

...
...
...
  

The <span> Tag

This is very important information.
  

Semantic Tags

• <header> → top section (logo, nav)
• <footer> → bottom section (copyright, contact)
• <main> → main content (only once per page)